<% include ./side.html %>
<style scoped>
	.com_top_title:after{
		content:'';
		display:block;
		clear:both;
	}
	table.table{
		background:#fff;
	}
	table.table .light_color th{
		font-weight:400;
	}
	table.table tr td{
		font-size:12px;
	}
	.block-time {
		margin: 20px 0;
		background: #fff;
		border-radius: 3px;
		padding: 30px 20px;
		display: flex;
		justify-content: center; 
		align-items: center;
	}
	.block-time li {
		display: flex;
		flex-direction: column;
		align-items: center; 
	}
	.block-time li.li1 {
		margin-right: 100px;
		width: 250px; 
	}
	.block-time li.li1 h1 {
		width: 250px;
		text-align: center; 
	}
	.block-time li.li2 {
		margin-right: 50px;
		width: 120px; 
	}
	.block-time li.li3 {
		width: 100px; 
	}
	.block-time h1 {
		font-size: 20px;
		color: #999;
		margin-bottom: 8px;
		padding-bottom: 8px;
		border-bottom: solid 1px #eee; 
	}
	.block-time h2 {
		font-size: 22px;
		color: #333; 
	}
	.charts {
		background: #fff;
		padding: 20px;
		margin: 20px 0; 
	}
	.charts .com_h2{
		font-weight:400;
		font-size: 20px; 
	}
	.charts h1 {
		font-size: 18px; 
	}
	.charts-pages {
		width: 100%;
		height: 250px; 
	}
	@media (max-width: 768px) {
		.block-time li.li1{
			margin-right:10px;
			width: 150px;
		}
		.block-time li.li1 h1{
			width: 150px;
		}
		.block-time h1{
			font-size:14px;
		}
		.block-time li.li2{
			margin-right:10px;
		}
		.block-time h2{
			width:150px;
			font-size:16px;
			text-align:center;
		}
	}
</style>
<div class="com_content_body main pb100" id="pages" v-cloak>
	<div class="com_top_title">
		<h1 class="com_h1 fl">慢资源性能详情</h1>
		<commonsearch></commonsearch>
	</div>
	<!-- 页面平均耗时说明 -->
	<div class="block-time" mt20>
		<li class="li1">
			<h1>慢资源响应平均耗时</h1>
			<h2 class="red">{{detail.duration|toFixed}}</h2>
		</li>
		<li class="li2">
			<h1>调用量</h1>
			<h2>{{detail.count}}次</h2>
		</li>
		<li class="li3">
			<h1>bodySize</h1>
			<h2>{{detail.body_size|toSize}}</h2>
		</li>
	</div>
	<div class="charts">
		<h1 class="com_h2 mb20">慢资源性能列表</h1>
		<div class="overflow_table">
			<!-- table列表 -->
			<table class="table" v-if="isLoadend&&listdata.length">
				<tr class="light_color">
					<th class="w-300">API地址</th>
					<th>请求方式</th>
					<th>请求耗时</th>
					<th>返回资源大小</th>
					<th>资源类型</th>
					<th>调用页面</th>
					<th>HTTP协议</th>
					<th>访问轨迹</th>
					<th>请求时间</th>
					<th>操作</th>
				</tr>
				<tr v-for="item in listdata">
					<td class="tc w-300"><a class="word-wrap" :href="'/web/resourcesitemdetail?markpage='+item.mark_page+'&id='+item._id">{{item.name}}</a></td>
					<td class="tc">{{item.method}}</td>
					<td class="red tc">{{item.duration|toFixed}}</td>
					<td class="tc">{{item.decoded_body_size|toSize}}</td>
					<td class="tc">{{item.type}}</td>
					<td class="tc">{{item.url}}</td>
					<td class="tc">{{item.next_hop_protocol}}</td>
					<td class="tc"><a :href="'/web/analysisdetail?markuser='+item.mark_user">查看轨迹详情</a></td>
					<td class="tc">{{item.create_time|date('/',true)}}</td>
					<td class="tc w-100"><a :href="'/web/resourcesitemdetail?markpage='+item.mark_page+'&id='+item._id">详情</a></td>
				</tr>
			</table>
		</div>
	</div>
	<div>
		<!--  分页 -->
		<div class="tc common_page_style mt10" v-show="isLoadend&&listdata.length">
			<div id="copot-page" class="copot-page"></div>
		</div>
		<!-- 暂无数据 -->
		<div class="tc mt20" v-if="!listdata.length">暂无数据!</div>
	</div>
</div>

<script>
	new Vue({
		el: '#pages',
		data: function () {
			return {
				detail:{},
				listdata: [],
				pageNo: 1,
				pageSize: config.pageSize,
				totalNum: 0,
				isLoadend: false,
				appId: util.getStorage('local', 'appId'),
				url: util.getQueryString('url') || '',
				beginTime: '',
				endTime: '',
			}
		},
		filters: {
			toFixed: window.Filter.toFixed,
			toSize: window.Filter.toSize,
			date: window.Filter.date,
		},
		mounted() {
			this.getDataForTime();
		},
		methods: {
			getDataForTime() {
				let times = util.getSearchTime()
				this.beginTime = times.beginTime
				this.endTime = times.endTime
				this.getOneResourceAvg();
				this.getOneResourceList();
			},
			getOneResourceAvg(){
				util.ajax({
					type: 'get',
					url: config.baseApi + 'api/v1/resource/getOneResourceAvg',
					data: {
						appId: this.appId,
						url: this.url,
						beginTime: this.beginTime,
						endTime: this.endTime,
					},
					success: data => {
						this.detail = data.data;
					}
				})
			},
			getOneResourceList() {
				this.isLoadend = false;
				util.ajax({
					type:'get',
					url: config.baseApi + 'api/v1/resource/getOneResourceList',
					data: {
						appId:this.appId,
						pageNo: this.pageNo,
						pageSize: this.pageSize,
						url: this.url,
						beginTime:this.beginTime,
						endTime:this.endTime,
					},
					success: data => {
						this.isLoadend = true;
						if (!data.data.datalist && !data.data.datalist.length) return;
						this.listdata = data.data.datalist;
						new Page({
							parent: $("#copot-page"),
							nowPage: this.pageNo,
							pageSize: this.pageSize,
							totalCount: data.data.totalNum,
							callback: (nowPage, totalPage) => {
								this.pageNo = nowPage;
								this.getOneAjaxList();
							}
						});
					}
				})
			},
		}
	})
</script>